<template>
  <div class="home">
    <el-container class="home-container">
      <!--      头部区域-->
      <el-header>
        <div>
          <span style="font-size: x-large;">问卷调查后台程序</span>
        </div>
        <div class="header-avatar">
                <el-dropdown>
                  <el-button type="text"style="transform: translateX(-100px);">
                    <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" >
                  </el-button>
                  <el-dropdown-menu slot="dropdown" >
                    <el-dropdown-item >
						<a  @click="backLogin">
							<i style="font-size: 15px; padding-right: 5px" class="el-icon-delete"></i>退出登录
						</a>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
      </el-header>
      <!--      页面主要内容-->
      <el-container>
        <!--        侧边栏部分-->
        <el-aside :width="isCollapse ? '64px':'200px' " >
          <div class="toggle-button" @click="toggleCollapse">
            <i id="left" class="el-icon-arrow-left" style="font-size: large;"></i>
          </div>

<!--          侧边栏菜单区域-->
          <el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff"
          :unique-opened="true" :collapse="isCollapse" :collapse-transition="false"
          router>
<!--            一级菜单区域-->
            <el-submenu index="1">
<!--              一级菜单模板区域-->
              <template slot="title">
<!--                一级菜单的图标-->
                <i class="el-icon-menu"></i>
<!--                文本-->
                <span>用户管理</span>
              </template>
<!--              二级菜单区域-->
              <el-menu-item index="/backstage/user" >
                <template slot="title">
                  <!--                一级菜单的图标-->
                  <i class="el-icon-menu"></i>
                  <!--                文本-->
                  <span>用户列表</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="3">
<!--              一级菜单模板区域-->
              <template slot="title">
<!--                一级菜单的图标-->
                <i class="el-icon-tickets"></i>
<!--                文本-->
                <span>问卷管理</span>
              </template>
<!--              二级菜单区域-->
              <el-menu-item index="/backstage/questionnaire">
                <template slot="title">
                  <!--                一级菜单的图标-->
                  <i class="el-icon-question"></i>
                  <!--                文本-->
                  <span>问卷列表</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="4">
<!--              一级菜单模板区域-->
              <template slot="title">
<!--                一级菜单的图标-->
                <i class="el-icon-location"></i>
<!--                文本-->
                <span>数据统计</span>
              </template>
<!--              二级菜单区域-->
              <el-menu-item index="/backstage/graphical">
                <template slot="title">
                  <!--                一级菜单的图标-->
                  <i class="el-icon-location"></i>
                  <!--                文本-->
                  <span>数据图形</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!--        内容部分-->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data(){
    return{
      isCollapse:false
    }
  },
  methods: {
    //退出登录
    logout() {
      this.$router.push('/login')
    },
    //点击按钮，菜单的折叠与展开
    toggleCollapse(){
      this.isCollapse=!this.isCollapse
	    //取出定义菜单的折叠和展开的组件
	    var a=document.getElementById("left");
	    if(a.className=="el-icon-arrow-left"){
		  a.className="el-icon-arrow-right";
	    }else{
		  a.className="el-icon-arrow-left";
	    }
    },
    backLogin(){
      //删除用户的登录信息
      window.sessionStorage.removeItem('token');
      //返回登录界面
      this.$router.push('/login');
    }
  }
}
</script>

<style scoped lang="less">
html,
body,
.home {
  height: 700px;
  margin: 0;
  padding: 0;
  min-width: 1366px;
}

.home-container {
  height: 100%;
}

.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
}

.el-header span {
  color: #dddddd;
  position: absolute;
  top: 10px;

}

.el-header img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-top: 0px;
  margin-left: 1200px;
}

.btn-out {
  position: absolute;
  top: 1%;
  left: 92%;
}

.el-aside {
  background-color: #333744;
  .el-menu{
    border-right: none;
    i{
      margin-left: 10px;
    }

  }
}

.el-main {
  background-color: #EAEDF1;
}
.toggle-button{
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.header-avatar {
  float: right;
  padding-left: 20px;
}
.header-name {
  float: right;
  padding-top: 12px;
  font-size: 15px;
  padding-right: 10px;
  padding-left: 9px;
}
a{
   text-decoration:none;
   color: #758EF5;
}
</style>
